<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖拽</title>
  <style>
    #div1 {width: 100px;height: 100px;background-color: green;position: absolute;}
  </style>
  <script>

    // offset()  直接获取当前元素，距离最左边的距离，margin不算数的
    // position() 直接获取，当前元素，距离第一个有定位父节点的距离，margin算在内
    // offset Parent() 查找第一个有定位的父节点，如果父节点没有定位就继续往上去找，最终找到html节点
    window.onload=function(){
      var oDiv = document.getElementById('div1');
      // 通过事件对象找到鼠标按下的位置
      oDiv.onmousedown = function(ev){
        var e = ev || window.event;
        var offsetX = e.pageX - this.offsetLeft;
        var offsetY = e.pageY - this.offsetTop;

        document.onmousemove = function (ev){
        var e = ev || window.event;
        oDiv.style.left = e.pageX - offsetX +'px';
        oDiv.style.top = e.pageY - offsetY +'px';
        }

        document.onmouseup=function(){
          // 鼠标抬起mousemove取消掉
          document.onmousemove=null;
        }
      }
    }
  </script>
</head>
<body>
  <div id="div1"></div>
</body>
</html>